<template>
    <el-container>
        <el-header>
            <div class="avatar" @click="personalFulVisable=!personalFulVisable">
                <div class="demo-basic--circle ">
                    <div class="block">

                        <el-avatar :size="50" :src="circleUrl"></el-avatar>
                        {{loginName}}
                    </div>
                </div>
            </div>
            <h1>超市管理系统</h1>
        </el-header>
        <!--个人设置菜单-->
        <div class="personalFul" v-show="personalFulVisable" @mouseout="personalFulVisable=!personalFulVisable">
            <ul>
                <li @click="informationBtn">个人资料完善</li>
                <li @click="empExit">退出</li>
                <li @click="logoutVisable=true">注销</li>
            </ul>
        </div>
        <!--注销账户-->
        <el-dialog
                title="注销账户"
                :visible.sync="logoutVisable"
                width="70%">
            <el-form :model="logoutform" :rules="rules" ref="logoutform" label-width="100px" class="demo-ruleForm">
                <el-form-item label="内容" prop="content">
                    <el-input v-model="logoutform.content" placeholder="请填写“本人确定注销”"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="logoutSubmit('logoutform')">确 定</el-button>
                    <el-button @click="logoutCel('logoutform')">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


        <el-container>
            <el-aside width="200px">
                <el-menu
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        :router="true"
                        :unique-opened="true"
                        active-text-color="#ffd04b">
                    <el-submenu v-for="item in menu_catalogs" :index="item.id+''">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span style="color: #ffffff">{{item.label}}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(c,index) in item.children" :index="c.purl">
<!--                                {{c.label}}-->
                                    <i :class="c.icon"></i>
                                    <span style="color: #b8b8b8">{{c.label}}</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
        <el-footer></el-footer>
    </el-container>
</template>
<script>
    import {clearCookie, loginEmp} from "@/assets/js/auth";
    import {ajaxGet, ajaxPost, popup} from "@/assets/js/common";
    import Cookies from "js-cookie";

    export default {
        data() {
            return {
                personalFulVisable: false,
                logoutVisable: false,
                loginName:'',
                logoutform:{},
                circleUrl: loginEmp().headImg,
                menu_catalogs: [],
                rules: {
                    content: [{required: true, message: '内容不能为空', trigger: 'blur'},]
                }

            }
        },
        methods: {
            init() {
                this.loginName=loginEmp().nickName
                ajaxGet("/empMenu", {}).then(res => {
                    res = res.data
                    if (res.code == 200) {
                        this.menu_catalogs = res.data
                    }
                })
            },
            /*个人资料*/
            informationBtn(){
              this.$router.push("/personal/information")
                popup("请完善个人的资料")
            },
            /*账户退出*/
            empExit() {
                this.$confirm('确定要退出系统?', '警示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    ajaxGet("/exit", this.pwdForm).then(res => {
                        res = res.data
                        if (res.code == 200) {
                            popup("成功退出系统...")
                            clearCookie("employee")
                            clearCookie("token")
                            this.$router.push('/')
                        } else {
                            popup(res.msg, "error")
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            /*注销账户*/
            logoutCel(formName) {
                this.$refs[formName].resetFields()
                this.logoutform={}
                this.logoutVisable = false

            },
            logoutSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                        if (valid) {
                            ajaxPost('/logout', {content: this.logoutform.content}).then(res => {
                                res = res.data
                                if (res.code == 200) {
                                    popup("注销成功")
                                    clearCookie("employee")
                                    clearCookie("token")
                                    this.logoutVisable = false
                                    this.$router.push('/')
                                } else {
                                    popup(res.msg, "error")
                                }
                            })
                        }})
            }

        },
        mounted() {
            this.init()
        }
    }
</script>
<style>
    h1 {
        display: inline-block;
        float: right;
        width: 80%;
        text-align: center;
    }

    .avatar {
        display: inline-block;
        width: 200px;
        float: right;
    }

    .personalFul {
        background-color: #ffffff;
        position: absolute;
        z-index: 999999;
        top: 58px;
        right: 20px;
        width: 151px;

    }

    .personalFul ul > li {
        margin: 1px auto;
        padding: 0px;
        height: 20px;
        color: #ffffff;
        background-color: #303133;
        list-style-type: none;
    }

    .personalFul ul > li:hover {
        background-color: #fc4316;
    }
</style>
